<template>
  <div class="login">
    <div class="head" :style="{ backgroundImage: 'url(' + headImage + ')' }"></div>
    <div class="message">
      {{ haveSavedUserName ? formData.account : "Login Please" }}
    </div>
    <div class="form">
      <div class="item" v-if="!haveSavedUserName" :class="isUserNameError ? 'error' : ''">
        <input
          class="account"
          placeholder="account..."
          type="email"
          v-model="formData.account"
        />
      </div>
      <div class="item" :class="isUserPasswordError ? 'error' : ''">
        <input
          class="password"
          placeholder="password..."
          type="password"
          v-model="formData.password"
          :class="formData.password ? 'password-in' : ''"
        />
        <i
          class="login-button iconfont icon-icon_send"
          :class="formData.password ? 'click-enable' : ''"
          @click="handlLogin"
        ></i>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import authService from "@/api-services/apis/auth";
import bus from "vue3-eventbus";
import eventKey from "@/const/busEventConstKey";
import storage from "@/utils/storage";
import headImage from "@/assets/img/bg.jpg";
import { useCommonStore } from "@/store/modules/common";
const commonStore = useCommonStore();
const { setLoginInfo } = commonStore;
 
const formData = ref({
  account: "",
  password: "",
});
const haveSavedUserName = ref(false);
const isUserNameError = ref(false);
const isUserPasswordError = ref(false);

const loginInfo = storage.getItem("loginInfo");
if (loginInfo) {
  if (loginInfo.account) {
    formData.value.account = loginInfo.account;
    haveSavedUserName.value = true;
  }
}

async function handlLogin() {
  let data = await authService.Login(formData.value);
  setLoginInfo(data);
  storage.setItem("loginInfo", data);
  bus.emit(eventKey.logined, data);
}
</script>

<style scoped lang="scss">
::-webkit-input-placeholder {
  color: #fff;
}

::-moz-placeholder {
  color: #fff;
}

:-ms-input-placeholder {
  color: #fff;
}
.login {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  margin-top: -100px;
  z-index: 999;
  backdrop-filter: blur(100px);
  .head {
    background-size: 40% auto;
    background-position: center center;
    height: 150px;
    width: 150px;
    border-radius: 100%;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
    margin-top: -50px;
  }
  .message {
    margin-top: 20px;
    font-size: 20px;
    text-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
    color: #eee;
    margin-bottom: 50px;
  }
  .form {
    display: flex;
    flex-direction: column;
    align-items: center;

    .error {
      animation: loginErrorAnimation 0.2s ease 3;
    }
    .item {
      vertical-align: middle;
      position: relative;
      width: 250px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      overflow: hidden;
      input {
        color: white;
        outline: none;
        border: none;
        margin: 5px;
        font-size: 16px;
        background-color: rgba(255, 255, 255, 0.3);
        padding: 8px 24px;
        border-radius: 20px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        width: 100%;
      }

      .password-in {
        width: 155px;
      }

      .password {
        transition: width 0.3s;
      }

      .login-button {
        position: absolute;
        top: 5px;
        right: -50px;
        transition: right 0.3s;
      }

      .iconfont {
        vertical-align: middle;
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.3);
        font-size: 18px;
        border-radius: 100%;
        width: 36px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        cursor: pointer;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
      }
      .iconfont:hover {
        background-color: rgba(255, 255, 255, 0.5);
      }
      .click-enable {
        right: 0;
      }
    }
  }
}
</style>
